<template>
    <div id="">
         <el-card class="box-card" style="margin:10px 0px">
            <div slot="header" class="clearfix" >
                <!-- @tab-click="handleClick"v-model="activeName"  -->
                <!-- 头部左侧内容 -->
                  <el-tabs class="tab" v-model="activeName">
                    <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                    <el-tab-pane label="访问量" name="visit"></el-tab-pane>
                  </el-tabs>
                  <!-- 头部右侧内容 -->
                  <div class="right">
                    <span @click="setDay">今日</span>
                    <span @click="setWeek">本周</span>
                    <span @click="setMonth">本月</span>
                    <span @click="setYear">本年</span>
                     <el-date-picker
                        v-model="date"
                        class="date"   
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="mini"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </div>
            </div>    
            <div>
                <el-row :gutter="10">
                    <el-col :span="16">
                        <!-- 准备一个容器 -->
                        <div class="charts" ref="charts"></div>
                    </el-col>
                    <el-col :span="8" class="right">
                        <h3>门店{{title}}排名</h3>
                        <ul>
                            <li>
                                <span class="rindex">1</span>
                                <span>肯德基</span>
                                <span class="value">123456</span>
                            </li>
                            <li>
                                <span class="rindex">2</span>
                                <span>肯德基</span>
                                <span class="value">123456</span>
                            </li>
                            <li>
                                <span class="rindex">3</span>
                                <span>肯德基</span>
                                <span class="value">123456</span>
                            </li>
                            <li>
                                <span >4</span>
                                <span>肯德基</span>
                                <span class="value">123456</span>
                            </li>
                            <li>
                                <span >5</span>
                                <span>肯德基</span>
                                <span class="value">123456</span>
                            </li>
                            <li>
                                <span >6</span>
                                <span>肯德基</span>
                                <span class="value">123456</span>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script >
import echarts from 'echarts'
import dayjs from 'dayjs'
export default {
    name: "",
    data() {
        return {
            activeName:"sale",
            myecharts:null,
            //收集日历的数据
            date:[]
        }
    },
    mounted(){
       this.myecharts = echarts.init(this.$refs.charts)
       this.myecharts.setOption({
         title:{
            text:this.title+'趋势'
         },
         tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
                axisTick: {
                    alignWithLabel: true
                }
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220,121,124,234,178,162]
                }
            ]
       })
    },
    components: {},
    methods: {
        //今天
        setDay(){
            const day=dayjs().format('YYYY-MM-DD')
            this.date=[day,day]
        },
        setWeek(){
            const start=dayjs().day(1).format('YYYY-MM-DD')
            const end=dayjs().day(7).format('YYYY-MM-DD')
            this.date=[start,end]
        },
        setMonth(){
            const start =dayjs().startOf('month').format('YYYY-MM-DD')
            const end =dayjs().endOf('month').format('YYYY-MM-DD')
            this.date=[start,end]
        },
        setYear(){
            const start =dayjs().startOf('year').format('YYYY-MM-DD')
            const end =dayjs().endOf('year').format('YYYY-MM-DD')
            this.date=[start,end]
        }
    },
    computed:{
        //计算属性--标题
        title(){
            return this.activeName == 'sale'?'销售额':'访问量'
        }    
    },
    watch:{
        title(){
            //重新修改图表的数据
            this.myecharts.setOption({
                title:{
                    text:this.title+'趋势'
                }
            })
        }
    }
}
</script>

<style scoped>
.clearfix{
    position: relative;
    display:flex;
    justify-content: space-between;
}
.tab{
    width:100%;
}
.right{
    position: absolute;
    right:0px;
}
.date{
    width:250px;
    margin:0px 20px;
}
.right span{
    margin:0px 10px;
}
 .charts{
    width: 100%;
    height: 300px;
}
.right{
    padding:0px
}
ul{
    list-style:none;
    width: 100%;
    height: 300px;
}
ul li{
    height:8%;
    margin: 10px 0px;
}
.rindex{
    float:left;
    width:20px;
    height: 20px;
    background: black;
    border-radius: 50%;
    color:white;
    text-align: center;
}
.value{
    float:right;
}
</style>
